// 路由的懒加载
import React, { lazy } from 'react'
// 去出重定向组件
import { Navigate } from 'react-router-dom'
const Home = lazy(() => import('../views/home'))
const Page = lazy(() => import('../views/Page'))
const Page2 = lazy(() => import('../views/Page2'))
const Page5 = lazy(() => import('../views/page5/page5-1'))
const Page41 = lazy(() => import('../views/page4/page4-1'))
const Page42 = lazy(() => import('../views/page4/page4-2'))
const Page43 = lazy(() =>import('../views/page4/page4-3')) 
const Page31 = lazy(() => import('../views/paget3/page3-1'))
const Page32 = lazy(() => import('../views/paget3/page3-2'))
const Page33 = lazy(() => import('../views/paget3/page3-3'))

// const  = lazy(() => 
import Login from '../views/login/index'


/**
 *   懒加载模式 注意点：
 *   1.  需要使用 React：中的<React.Suspense fallback={<div>加载中..</div>}></ React.Suspense> 组件 包含着需要懒加载的组件
*/
const withLoadingComponent = (comp: JSX.Element) =>
    <React.Suspense fallback={<div>加载中..</div>} >
        {comp}
    </React.Suspense >
 const routerArray = [
    {
        path: '/',
        element: <Navigate to="/Page" />
    },
    // 嵌套路由 开始 -----------------------------------
    {
        path: '/',
        element: <Home />,
        children: [
            {
                path: '/Page',
                element: withLoadingComponent(<Page />)
            },
            {
                path: '/Page2',
                element: withLoadingComponent(<Page2 />)
            },
            {
                path: '/Page3/page3-1',
                element: withLoadingComponent(<Page31 />)
            },
            {
                path: '/Page3/page3-2',
                element: withLoadingComponent(<Page32/>)
            },
            {
                path: '/Page3/page3-3',
                element: withLoadingComponent(<Page33 />)
            },
            {
                path: '/Page4/page4-1',
                element: withLoadingComponent(<Page41 />)
            },
            {
                path: '/Page4/page4-2',
                element: withLoadingComponent(<Page42 />)
            },
            {
                path: '/Page4/page4-3',
                element: withLoadingComponent(<Page43 />)
            },
            
            {
                path: '/Page5',
                element: withLoadingComponent(<Page5 />)
            }  
         ]
    },
    // 嵌套路由 结束------------------------------------
    {
        path: '/login',
        element: <Login />
    },
    
]

export default routerArray